<template>
  <el-container>
    <el-header>
      <!-- 头部入口 -->
      <my-header></my-header>
    </el-header>
    <el-container>
      <el-aside width='auto' style='height: 100%;'>
        <router-link to='/mainCenter/welcome' class="mainTab" tag='div'><i class="el-icon-s-home"></i>首页</router-link>
        <!-- 侧边栏入口 -->
        <my-aside ref='aside' @pushMyTab='getTab' :activeName = 'activeName'></my-aside>
      </el-aside>
      <el-main>
        <!-- 导航栏入口 -->
        <template v-if="tabs.length>0">
          <el-tabs type="border-card" v-model="activeTab">
            <el-tab-pane v-for="(item,index) in tabs" :key='index'>
              <span slot="label" class="close" :name='String(index)'>
                {{item}}
                <el-button type="danger" size="small" icon="el-icon-delete" plain circle @click.stop='removeTab(index)'></el-button>
              </span>
            </el-tab-pane>
            <router-view />
          </el-tabs>
        </template>
        <template v-else>
          <router-view />
        </template>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import myAside from '../../layout/aside.vue'
  import myHeader from '../../layout/header.vue'
  export default {
    components: {
      myAside,
      myHeader
    },
    data() {
      return {
        activeTab: '',
        tabs: [],
        routes: [],
        activeName : ''
      }
    },
    watch:{
      activeTab(val){
        let targetUrl = this.routes[val] || '';
        this.activeName = targetUrl || ''
        if(targetUrl) this.$router.push(targetUrl);
      }
    },
    methods: {
      getTab(item,route){
        let ind = this.tabs.indexOf(item);
        if (ind < 0) {
          this.tabs.push(item);
          this.routes.push(route);
        }
        let active = ind < 0 ? this.tabs.length -1 : ind;
        this.activeTab = String(active);
      },
      removeTab(ind){
        this.tabs.splice(ind,1);
        this.routes.splice(ind,1);
        let isHave = this.tabs.length>0;
        if(ind == this.activeTab){
          this.activeTab = isHave ? String(this.tabs.length-1) : '';
          if(!isHave){
            this.$router.push('/mainCenter/welcome');
          }
        }else{
          let active = ind > this.activeTab ? this.activeTab : --this.activeTab;
          this.activeTab = String(active);
        }
      }
    }
  }
</script>

<style>
  .el-container {
    height: 100vh;
  }

  .el-header {
    background: #d86e7c;
  }

  .el-aside {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;
    transition: all .5s;
    /* background: #f7f7ee; */
    border-right: 1px solid #DCDFE6;
  }

  .leftIcon {
    width: 8px;
    height: 58px;
    /* background: #f7f7ee; */
    position: absolute;
    left: 0px;
    top: 50%;
    margin-top: -29px;
  }

  .el-main {
    /* background: #f7f7ee; */
    position: relative;
    padding: 10px;
    overflow-y: hidden;
    box-sizing: border-box;
  }

  .mainTab {
    color: #303133;
    padding-left: 15px;
    font-size: 16px;
    height: 56px;
    line-height: 56px;
    border-bottom: 1px solid white;
    font-weight: bold;
    cursor: pointer;
  }

  .mainTab i {
    margin-right: 5px;
    color: #909399;
  }
</style>
